<template lang="pug">
  .tags-base
    .title 全部分类
    ul.tags
      li(v-for="tag in all",@click="chooseTag(tag)") {{tag}}
    .title 热门搜索
    ul.tags
      li(v-for="tag in hot",@click="chooseTag(tag)") {{tag}}
</template>

<script>
export default {
  name: 'Tags',
  data () {
    return {
      hot: [],
      all: []
    }
  },
  methods: {
    getTags () {
      this.$http.get('/proxy/api/goods/category', {}).then((res) => {
        this.hot = res.body.hot
        this.all = res.body.all
      }, (err) => {
        console.log(err)
      })
    },
    chooseTag (tag) {
      this.$router.push({name: 'CategoryResults', query: {category: tag}})
    }
  },
  mounted () {
    this.getTags()
  }
}
</script>

<style lang="sass">
@import '../styles/color.sass';
.tags-base
  padding: 10px
  .title
    font-size: 1.1em
    padding: 5px 0px
  ul.tags
    list-style: none
    margin: 0px
    padding: 10px 0px
    li
      display: inline-block
      width: auto
      padding: 3px 10px
      border: $gray-bg 1px solid
      border-radius: 15px
      color: $gray
      margin-right: 10px
      margin-bottom: 15px
      font-size: .9em
      &:active
        background: $gray-bg
      &:hover
        cursor: pointer
</style>
